<template>
  <section class="text-sm text-white">
    <div class="flex flex-wrap justify-center gap-5 text-center">
      <div
        @click="onChangeCategory(item, index)"
        class="tag-item w-[160px] cursor-pointer rounded-[50px] border border-gray-600 py-3"
        :class="{ 'active-tag': index === current }"
        v-for="(item, index) in tagList"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const emits = defineEmits(['change'])

const route = useRoute()

const tagList = ref([
  {
    tag_id: '',
    name: 'All'
  }
])

let type = route.query.type

const current = ref(0)

const onChangeCategory = (item, index: number) => {
  current.value = index
  emits('change', item.tag_id)
}

// 查询所有标签
let tagRes = await useFetch('/api/tag/queryAllTag')

tagList.value = tagList.value.concat(tagRes.data.value.data)

if (type) {
  type = Number(type)
  current.value = tagList.value.findIndex((item) => item.tag_id === type)
}
</script>

<style lang="scss" scoped>
.active-tag {
  background: var(
    --gradient-primary-gradient-leonardo,
    linear-gradient(81deg, #fa5560 -23.47%, #b14bf4 45.52%, #4d91ff 114.8%)
  );
}

.tag-item {
  transition: all 0.3s ease;
}
</style>
